<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>福建省图书馆馆藏文献知识资源数据库</title>
    <link rel="stylesheet" href="./images/css/mobile.css" />
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
  </head>
  <body>
    <div class="page-list-m">
      <div class="filter">
        <div class="fields">
          <a class="item">
            图书/书籍<img src="images/m/arrow-d.png" alt="" />
          </a>
          <a class="item">图表<img src="images/m/arrow-d.png" alt="" /></a>
          <a class="item">知识<img src="images/m/arrow-d.png" alt="" /></a>
        </div>
        <div class="dropdown">
          <div class="menu">
            <div class="item checked">
              <span>全部</span>
              <img src="./images/m/checked-o.png" alt="" class="checkbox" />
            </div>
            <div class="item">
              <span>事件2</span>
              <img src="./images/m/checked-o.png" alt="" class="checkbox" />
            </div>
            <div class="item">
              <span>事件3</span>
              <img src="./images/m/checked-o.png" alt="" class="checkbox" />
            </div>
          </div>
          <div class="menu">
            <div class="item">
              <span>全部</span>
              <img src="./images/m/checked-o.png" alt="" class="checkbox" />
            </div>
            <div class="item">
              <span>事件</span>
              <img src="./images/m/checked-o.png" alt="" class="checkbox" />
            </div>
          </div>
        </div>
        <div class="backdrop"></div>
      </div>

      <div class="container">
        <div class="list">
          <a class="list-item">
            <div class="hd">
              <span class="tag">[图书]</span>
              <span class="tit">Lorem ipsum dolor sit amet, consectetur.</span>
            </div>
            <div class="bd">
              <div class="thumb">
                <div
                  class="book-cover"
                  style="
                    background-image: url(https://placeimg.com/150/200/tech);
                  "
                ></div>
              </div>
              <div class="content">
                <dl class="meta lg">
                  <div>
                    <dt>责任者：</dt>
                    <dd>Lorem ipsum dolor sit amet.</dd>
                  </div>
                  <div>
                    <dt>创作时间：</dt>
                    <dd>Lorem ipsum dolor sit amet.</dd>
                  </div>
                  <div>
                    <dt>创作地点地点：</dt>
                    <dd>Lorem ipsum dolor sit amet.</dd>
                  </div>
                  <div>
                    <dt>内容：</dt>
                    <dd>Lorem ipsum dolor sit amet.</dd>
                  </div>
                  <div>
                    <dt>内容：</dt>
                    <dd>Lorem ipsum dolor sit amet.</dd>
                  </div>
                  <div>
                    <dt>内容：</dt>
                    <dd>Lorem ipsum dolor sit amet.</dd>
                  </div>
                </dl>
              </div>
            </div>
          </a>
          <a class="list-item">
            <div class="hd">
              <span class="tag">[图书]</span>
              <span class="tit">Lorem ipsum dolor sit amet, consectetur.</span>
            </div>
            <div class="bd">
              <div class="thumb">
                <div
                  class="book-cover"
                  style="
                    background-image: url(https://placeimg.com/150/200/tech);
                  "
                ></div>
              </div>
              <div class="content">
                <dl class="meta">
                  <div>
                    <dt>责任者：</dt>
                    <dd>Lorem ipsum dolor sit amet.</dd>
                  </div>
                  <div>
                    <dt>创作时间：</dt>
                    <dd>Lorem ipsum dolor sit amet.</dd>
                  </div>
                  <div>
                    <dt>创作地点：</dt>
                    <dd>Lorem ipsum dolor sit amet.</dd>
                  </div>
                  <div>
                    <dt>内容：</dt>
                    <dd>Lorem ipsum dolor sit amet.</dd>
                  </div>
                  <div>
                    <dt>内容：</dt>
                    <dd>Lorem ipsum dolor sit amet.</dd>
                  </div>
                  <div>
                    <dt>内容：</dt>
                    <dd>Lorem ipsum dolor sit amet.</dd>
                  </div>
                </dl>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>

    <script>
      const filter = $(".filter");
      const fields = filter.find(".fields > .item");
      const menus = filter.find(".dropdown > .menu");
      const menuItems = menus.find(".item");
      const backdrop = filter.find(".backdrop");

      fields.on("click", function () {
        const index = $(this).index();
        activeField(index);
        activeMenu(index);
      });

      menuItems.on("click", function () {
        const item = $(this);
        const menu = item.closest(".menu");
        menu.find(".item").removeClass("checked");
        item.addClass("checked");
      });

      backdrop.on("click", function () {
        fields.removeClass("inactive active");
        menus.removeClass("visible");
        backdrop.hide();
      });

      function activeField(index) {
        fields
          .addClass("inactive")
          .removeClass("active")
          .eq(index)
          .removeClass("inactive")
          .addClass("active");
      }
      function activeMenu(index) {
        menus.removeClass("visible").eq(index).addClass("visible");
        backdrop.show();
      }
    </script>
  </body>
</html>
